<template>
    <el-dialog
      :title="title"
      :visible.sync="modify"
      width="60%"
      append-to-body
      @close="CloseIn"
      destroy-on-close
    >
      <el-form :model="form" ref="form" :rules="rules">
        <table align="center" class="default-table" width="100%" height="100%" cellspacing="0">
          <tr align="center" height="50px" cellspacing="0">
            <td width="10%">
              <span class="asterisk">*</span>姓名
            </td>
            <td width="20.3%">
              <el-form-item prop="name" class="formItem">
                <el-input placeholder="请输入姓名" v-model.trim="form.name" :disabled="showType == 'detail'" maxlength="10" />
              </el-form-item>
            </td>
            <td width="10%">
              <span class="asterisk">*</span>性别
            </td>
            <td width="20.3%">
              <el-form-item prop="sex" class="formItem">
                <el-select v-model="form.sex" placeholder="请选择" :disabled="showType == 'detail'" clearable class="elSelect">
                  <el-option
                    v-for="dict in dict.type.sys_user_sex"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td width="33.3%" rowspan="6" colspan="2">
              <el-form-item prop="avatar">
                <uploadImg @imageUrl="imageUrl" :avatar="form.avatar" :disabled="showType == 'detail'"></uploadImg>
              </el-form-item>
            </td>
          </tr>
          <tr align="center" height="50px">
            <td>
              <span class="asterisk">*</span>注册号
            </td>
            <td>
              <el-form-item prop="registerCode" class="formItem">
                <el-input v-model.trim="form.registerCode" placeholder="请输入注册号" :disabled="showType == 'detail'" maxlength="15" />
              </el-form-item>
            </td>
            <td><span class="asterisk">*</span>学号</td>
            <td>
              <el-form-item prop="sno" class="formItem">
                <el-input v-model.trim="form.sno" placeholder="请输入学号" :disabled="showType == 'detail'" maxlength="15" />
              </el-form-item>
            </td>
            
          </tr>
          <tr align="center" height="50px">
            <td>
              <span class="asterisk">*</span>身份证号
            </td>
            <td>
              <el-form-item prop="cardCode" class="formItem">
                <el-input
                  v-model.trim="form.cardCode"
                  placeholder="请输入身份证号"
                  @blur="codeBulr"
                  :disabled="showType == 'detail'"
                  maxlength="18"
                />
              </el-form-item>
            </td>
            <td>
              <span class="asterisk">*</span>出生日期
            </td>
            <td>
              <el-form-item prop="birthday" class="formItem">
                <!-- <el-input v-model.trim="form.birthday" placeholder="出生日期" disabled/> -->

                <el-date-picker
                  disabled
                  class="elSelect"
                  v-model="form.birthday"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </td>
           
          </tr>
          <tr align="center" height="50px">
            <td>
              <span class="asterisk">*</span>民族
            </td>
            <td>
              <el-form-item prop="nation" class="formItem">
                <el-select v-model="form.nation" placeholder="请选择" :disabled="showType == 'detail'" clearable class="elSelect">
                  <el-option
                    v-for="dict in dict.type.bc_nation_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <span class="asterisk">*</span>籍贯
            </td>
            <td>
              <el-form-item prop="nativePlace" class="formItem">
                <!-- <el-input v-model.trim="form.nativePlace" placeholder="请输入籍贯" maxlength="20" /> -->
                <el-cascader v-model="form.nativePlace" 
                :disabled="showType == 'detail'"
                :props="{ value: 'unitCode', currentLabels: 'label', checkStrictly: true }"
                 :options="options" @change="handlePlace"></el-cascader>
              </el-form-item>
            </td>
            
          </tr>
          <tr align="center" height="50px">
            <td>政治面貌</td>
            <td>
              <el-form-item prop="political" class="formItem">
                <el-select v-model="form.political" placeholder="请选择" :disabled="showType == 'detail'" clearable class="elSelect">
                  <el-option
                    v-for="dict in dict.type.bc_political_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <span class="asterisk">*</span>户籍所在地
            </td>
            <td>
              <el-form-item prop="residence" class="formItem">
                <el-input v-model.trim="form.residence" :disabled="showType == 'detail'" placeholder="请输入户籍所在地" maxlength="50" />
              </el-form-item>
            </td>
           
          </tr>
          <tr align="center" height="50px">
            <td>
              <span class="asterisk">*</span>所在院部
            </td>
            <td>
              <el-form-item prop="deptId" class="formItem">
                <!-- <el-cascader
                  class="elSelect"
                  clearable
                  v-model="form.deptId"
                  :options="deptOptions"
                  :props="{ value: 'id',currentLabels: 'label', checkStrictly: true }"
                  @change="handleChange"
                ></el-cascader> -->
                <el-select
                  v-model="form.deptId"
                  placeholder="请选择"
                  clearable
                  class="elSelect"
                  @change="handleChange"
                  :disabled="showType == 'detail'"
                >
                  <el-option
                    v-for="item in deptOptions"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <span class="asterisk">*</span>专业
            </td>
            <td>
              <el-form-item prop="specialityId" class="formItem">
                <el-select
                  v-model="form.specialityId"
                  placeholder="请选择"
                  clearable
                  class="elSelect"
                  @change="changeGrade"
                  :disabled="showType == 'detail'"
                >
                  <el-option
                    v-for="item in profession"
                    :key="item.VALUE"
                    :label="item.TITILE"
                    :value="item.VALUE"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
           
          </tr>
          <tr align="center" height="50px">
            <td>
              <span class="asterisk">*</span>年级
            </td>
            <td>
              <el-form-item prop="gradeId" class="formItem">
                <el-select
                  v-model="form.gradeId"
                  placeholder="请选择"
                  @change="changeGrade"
                  clearable
                  :disabled="showType == 'detail'"
                  class="elSelect"
                >
                  <el-option
                    v-for="item in gradeDate"
                    :key="item.VALUE"
                    :label="item.TITILE"
                    :value="item.VALUE"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <span class="asterisk">*</span>班级
            </td>
            <td>
              <el-form-item prop="classId" class="formItem">
                <el-select v-model="form.classId" placeholder="请选择" :disabled="showType == 'detail'" clearable class="elSelect">
                  <el-option
                    v-for="item in classList"
                    :key="item.VALUE"
                    :label="item.TITLE"
                    :value="item.VALUE"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>

            <td width="10%">
              <span class="asterisk">*</span>学生类型
            </td>
            <td>
              <el-form-item prop="studentType" class="formItem">
                <el-select v-model="form.studentType" placeholder="请选择" :disabled="showType == 'detail'" clearable class="elSelect">
                  <el-option
                    v-for="dict in dict.type.bc_student_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            
          </tr>
          <tr align="center" height="50px">
            <td>
              <span class="asterisk">*</span>入学时间
            </td>
            <td>
              <el-form-item prop="joinDate" class="formItem">
                <el-date-picker
                  class="elSelect"
                  clearable
                  v-model="form.joinDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :disabled="showType == 'detail'"
                ></el-date-picker>
              </el-form-item>
            </td>
            <td>
              <span class="asterisk">*</span>毕业时间
            </td>
            <td>
              <el-form-item prop="guaduateDate" class="formItem">
                <el-date-picker
                  class="elSelect"
                  clearable
                  v-model="form.guaduateDate"
                  type="date"
                  placeholder="选择日期"
                  :disabled="showType == 'detail'"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </td>
            <td width="10%">入学前户口类别</td>
            <td>
              <el-form-item prop="nodeType" class="formItem">
                <el-select v-model="form.nodeType" placeholder="请选择" :disabled="showType == 'detail'" clearable class="elSelect">
                  <el-option
                    v-for="dict in dict.type.bc_node_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
           
          </tr>
          <tr align="center" height="50px">
            <td>
              <span class="asterisk">*</span>联系电话
            </td>
            <td>
              <el-form-item prop="mobile" class="formItem">
                <el-input v-model.trim="form.mobile" :disabled="showType == 'detail'" placeholder="请输入联系电话" maxlength="11" />
              </el-form-item>
            </td>
            <td>邮箱</td>
            <td>
              <el-form-item prop="email" class="formItem">
                <el-input v-model.trim="form.email" placeholder="请输入邮箱" :disabled="showType == 'detail'" maxlength="30" />
              </el-form-item>
            </td>
            <td>qq号</td>
            <td>
              <el-form-item prop="qq" class="formItem">
                <el-input v-model.trim="form.qq" placeholder="请输入qq号" :disabled="showType == 'detail'" maxlength="12" />
              </el-form-item>
            </td>
           
          </tr>
          <tr align="center" height="50px">
            <td>微信</td>
            <td>
              <el-form-item prop="wechatCode" class="formItem">
                <el-input v-model.trim="form.wechatCode" placeholder="请输入微信号" :disabled="showType == 'detail'" maxlength="30" />
              </el-form-item>
            </td>
            <td width="10%">健康状况</td>
            <td>
              <el-form-item prop="healthStatus" class="formItem">
                <el-select v-model="form.healthStatus" placeholder="请选择" clearable :disabled="showType == 'detail'" class="elSelect">
                  <el-option
                    v-for="dict in dict.type.bc_health_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <span class="asterisk">*</span>家长电话
            </td>
            <td>
              <el-form-item prop="emergencyMobile" class="formItem">
                <el-input
                  v-model.trim="form.emergencyMobile"
                  placeholder="请输入家长电话"
                  maxlength="11"
                  :disabled="showType == 'detail'"
                />
              </el-form-item>
            </td>
          </tr>
          <tr align="center" height="50px">
            
            <td width="10%">
              <span class="asterisk">*</span>学籍状态
            </td>
            <td>
              <el-form-item prop="studentStatus" class="formItem">
                <el-select v-model="form.studentStatus" placeholder="请选择" :disabled="showType == 'detail'" learable class="elSelect">
                  <el-option
                    v-for="dict in dict.type.bc_student_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td width="10%">
              <span class="asterisk">*</span>在校状态
            </td>
            <td>
              <el-form-item prop="atSchool" class="formItem">
                <el-select v-model="form.atSchool" placeholder="请选择" :disabled="showType == 'detail'" learable class="elSelect">
                  <el-option
                    v-for="dict in dict.type.basic_at_school"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>辅导员姓名</td>
            <td>
              <el-form-item prop="thrName" class="formItem">
                <el-input
                  v-model.trim="form.thrName"
                  placeholder="请输入辅导员姓名"
                  maxlength="10"
                  disabled
                />
              </el-form-item>
            </td>
           
          </tr>
          <tr align="center" height="50px">
            
            <td>辅导员电话</td>
            <td>
              <el-form-item prop="phone" class="formItem">
                <el-input v-model.trim="form.phone" placeholder="请输入辅导员电话" maxlength="11" disabled />
              </el-form-item>
            </td>
            <td width="10%">生源地</td>
            <td>
              <el-form-item prop="ofStudent" class="formItem">
                <el-input v-model.trim="form.ofStudent" placeholder="请输入生源地" maxlength="30" :disabled="showType == 'detail'" />
              </el-form-item>
            </td>
            <td>宗教信仰</td>
            <td>
              <el-form-item prop="religion" class="formItem">
                <el-input v-model.trim="form.religion" placeholder="请输入宗教信仰" maxlength="20" :disabled="showType == 'detail'" />
              </el-form-item>
            </td>
            
          </tr>
          <tr align="center" height="50px">
            
            <td>毕业高中</td>
            <td>
              <el-form-item prop="highSchool" class="formItem">
                <el-input v-model.trim="form.highSchool" placeholder="请输入毕业高中" maxlength="30" :disabled="showType == 'detail'" />
              </el-form-item>
            </td>
            <td width="10%">楼号</td>
            <td>
              <el-form-item prop="houseNo" class="formItem">
                <el-input v-model.trim="form.houseNo" placeholder="请输入楼号" maxlength="15" disabled />
              </el-form-item>
            </td>
            <td>宿舍号</td>
            <td>
              <el-form-item prop="roomNo" class="formItem">
                <el-input v-model.trim="form.roomNo" placeholder="请输入宿舍号" maxlength="15" disabled />
              </el-form-item>
            </td>
            
          </tr>
          <!-- <tr align="center" height="50px">
           
            <td>年度缴费（欠费）情况</td>
            <td>
              <el-form-item prop class="formItem">
                <el-input v-model.trim="form.JF" placeholder="请输入年度缴费（欠费）情况" maxlength="15" :disabled="showType == 'detail'" />
              </el-form-item>
            </td>
            <td align="center">是否重点关注对象</td>
            <td colspan="3">
              <el-form-item prop="followStatus" class="formItem">
                <el-radio-group v-model="form.followStatus" :disabled="showType == 'detail'">
                  <el-radio
                    v-for="dict in dict.type.follow_status"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
           
          </tr>
          <tr align="center" v-if="form.followStatus == '0'" height="100px">
            <td>关注原因</td>
            <td colspan="5">
              <el-form-item prop="followReson" class="formItem">
                <el-input
                  :rows="4"
                  v-model.trim="form.followReson"
                  placeholder="请输入"
                  type="textarea"
                  :disabled="showType == 'detail'"
                  maxlength="255"
                />
              </el-form-item>
            </td>
          </tr>
          <tr align="center" v-if="form.followStatus == '0'" height="100px">
            <td>关注处理方式</td>
            <td colspan="5">
              <el-form-item prop="followDisposal" class="formItem">
                <el-input
                  :rows="4"
                  v-model.trim="form.followDisposal"
                  :disabled="showType == 'detail'"
                  placeholder="请输入"
                  type="textarea"
                  maxlength="1"
                />
              </el-form-item>
            </td>
          </tr> -->
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveInfo" v-if="showType != 'detail'">确 定</el-button>
        <el-button @click="closeDia">取 消</el-button>
      </div>
    </el-dialog>
</template>

<script>
import Validators from "@/utils/validate.js";
import uploadImg from "@/components/ImageUpload/imageIndex";
import { getClassSelect, getProvinceTree } from "@/api/information/classInfor";
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import { getGradeSelect } from "@/api/information/gradeInfor";
export default {
  components: { uploadImg },
  props: {
    title: { type: String },
    forms: { type: Object },
    deptOptions: {
      type: Array,
      default: function() {
        return [];
      }
    },
    options: {
      type: Array,
      default: function() {
        return [];
      }
    },
    showType: {
      type: String,
      default: 'operate'
    },
  },
  dicts: [
    "bc_student_status", // 学籍状态
    "bc_political_type", // 政治面貌
    "bc_nation_type", // 民族
    "bc_student_type", // 学生类型
    "bc_node_type", // 入学前户口类别
    "follow_status", // 是否关注对象
    "sys_user_sex", // 性别
    "bc_student_famliy", // 家庭关系
    "bc_health_status", // 健康状态
    "basic_at_school" // 是否在校
  ],
  data() {
    return {
      modify: false,
      rules: {
        name: [
          {
            required: true,
            text: "请输入姓名",
            validator: Validators.isString,
            trigger: "blur"
          }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        registerCode: [
          {
            required: true,
            text: "请输入注册号",
            validator: Validators.isNumber,
            trigger: "blur"
          }
        ],
        sno: [
          {
            required: true,
            text: "请输入学号",
            validator: Validators.istext,
            trigger: "blur"
          }
        ],
        birthday: [
          {
            required: true,
            message: "输入正确的身份证号码出生日期自动回显",
            trigger: "blur"
          }
        ],
        nation: [{ required: true, message: "请选择民族", trigger: "change" }],
        nativePlace: [
          {
            required: true,
            message: "请选择籍贯",
            trigger: "change"
          }
        ],
        nation: [
          { required: true, message: "请选择政治面貌", trigger: "change" }
        ],
        cardCode: [
          {
            required: true,
            text: "请输入身份证号",
            validator: Validators.idNumber,
            trigger: "blur"
          }
        ],
        residence: [
          {
            required: true,
            text: "请输入户籍所在地",
            validator: Validators.isString,
            trigger: "blur"
          }
        ], 
        deptId: [
          { required: true, message: "请选择所在院部", trigger: "change" }
        ],
        specialityId: [
          { required: true, message: "请选择专业", trigger: "change" }
        ],
        gradeId: [{ required: true, message: "请选择年级", trigger: "change" }],
        classId: [{ required: true, message: "请选择班级", trigger: "change" }],
        studentType: [
          { required: true, message: "请选择学生类型", trigger: "change" }
        ],
        atSchool: [
          { required: true, message: "请选择是否在校", trigger: "change" }
        ],
        joinDate: [
          { required: true, message: "请选择入学时间", trigger: "change" }
        ],
        guaduateDate: [
          { required: true, message: "请选择毕业时间", trigger: "change" }
        ],
        nodeType: [
          { required: false, message: "请选择户口类别", trigger: "change" }
        ],
        mobile: [
          {
            required: true,
            text: "请输入联系电话",
            validator: Validators.isPhone,
            trigger: "blur"
          }
        ],
        schoolEmail: [
          { required: false, message: "请输入邮箱地址", trigger: "blur" },
          {
            message: "请输入正确的邮箱地址",
            pattern: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
            trigger: "blur"
          }
        ],
        email: [
          { required: false, message: "请输入邮箱地址", trigger: "blur" },
          {
            message: "请输入正确的邮箱地址",
            pattern: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
            trigger: "blur"
          }
        ],
        healthStatus: [
          { required: false, message: "请选择健康状况", trigger: "change" }
        ],
        emergencyContact: [
          {
            required: true,
            text: "请输入紧急联系人",
            validator: Validators.isString,
            trigger: "blur"
          }
        ],
        emergencyMobile: [
          {
            required: true,
            text: "请输入紧急联系人电话",
            validator: Validators.isPhone,
            trigger: "blur"
          }
        ],
        studentStatus: [
          { required: true, message: "请选择学籍状态", trigger: "change" }
        ],
        followStatus: [
          { required: false, message: "请选择是否关注对象", trigger: "change" }
        ],
        followReson: [
          { required: false, message: "请输入关注原因", trigger: "blur" },
          {
            message: "输入的格式不对",
            pattern: /^[\u4e00-\u9fa5\w\d-_]+$/,
            trigger: "blur"
          }
        ]
      },
      classList: [],
      profession: [],
      gradeDate: [],
      options: [],
      form: {
        specialityId: undefined,
        classId: undefined,
        followStatus: "1"
      }
    };
  },

  watch: {
    forms(n, o) {
      //n为新值,o为旧值;
      this.form = n;
      if (n) {
        this.getSpeciality();
        this.changeGrade();
        this.getGradeInfor();
      }
      this.updata();
    }
  },
  created() {
  
    this.getTree();
  },
  methods: {
    updata() {
      // created只会执行一次，但是又想监听改变的值做其他事情，就要使用methods 来代替 created
      this.form = this.forms;
      if(this.form.teacher){

        this.form.thrName = this.form.teacher.name;
        this.form.phone = this.form.teacher.phone;
      }

     
    },
    imageUrl(data) {
      this.form.avatar = data;
    },
    openDia() {
      this.modify = true;
    },
    closeDia() {
      this.modify = false;
      this.form = {
        specialityId: undefined,
        classId: undefined
      };
    },
    saveInfo() {
      // 告诉父组件，保存成功
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (new Date(this.form.guaduateDate) < new Date(this.form.joinDate)) {
            this.$modal.msgWarning("毕业时间不能小于入学时间");
          }
          this.$emit("saveSuccess", this.form);
        }
      });
      // console.log(this.form, "表单");
    },
    // 清除表单
    CloseIn() {
      this.form = {
        specialityId: undefined,
        classId: undefined
      };
      this.modify = false;
    },
    // 根据身份证号获取出生年月日
    getBirthday(idCard) {
      // 提取生日信息
      var birthday = idCard.substr(6, 8);
      // 解析年、月、日
      var year = birthday.substr(0, 4);
      var month = birthday.substr(4, 2);
      var day = birthday.substr(6, 2);

      // 返回生日信息
      return year + "-" + month + "-" + day;
    },
    // 籍贯选择赋值
    handlePlace(data) {
      this.form.nativePlace = data[data.length - 1]
      // this.form.bnpId = data[data.length - 1]
    },
    // 下拉树选择
    handleChange(value) {
      this.form.specialityId = "";
      this.getSpeciality();
    },

    async getSpeciality() {
      if (this.form.deptId) {
        await getSpecialityByDeptId({ deptId: this.form.deptId }).then(res => {
          if (res.code == "200") {
            this.profession = res.data;
          } else {
            this.profession = [];
          }
        });
      } else {
        this.profession = [];
      }
    },
    getGradeInfor() {
      getGradeSelect().then(response => {
        // console.log(response, "Student");
        this.gradeDate = response.data;
      });
    },
    // 收入身份证获取年月日
    codeBulr() {
      // this.form.birthday = this.getBirthday(this.form.cardCode)
      this.$set(this.form, "birthday", this.getBirthday(this.form.cardCode));
    },
    // getTree() {
    //   getProvinceTree().then(response => {
    //     this.options = response.data;
    //   });
    // },
    getClassList() {
      getClassSelect({
        gradeId: this.form.gradeId,
        specialtyId: this.form.specialityId
      }).then(res => {
        this.classList = res.data;
        console.log(this.classList, "班级");
      });
    },
    // 获取班级拉下树
    changeGrade(value) {
      console.log(value, "ceeee");
      if (value != undefined) {
        if (this.form.specialityId && this.form.gradeId) {
          this.getClassList();
          this.classList = [];
          this.form.classId = "";
        } else {
          if (!value) {
            this.classList = [];
            this.form.classId = "";
          }
        }
        let obj = {};
        obj = this.gradeDate.find(function(i) {
          // console.log(i,'i')
          return i.VALUE === value;
        });
        this.form.joinDate = obj.ENROLTIME;
        this.form.guaduateDate = obj.GRADUATE;
      } else {
        this.getClassList();
      }
    }
  }
};
</script>

<style scoped>
.formItem {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 100%;
  padding: 0 10px;
}
.asterisk {
  color: red;
  margin-right: 3px;
}
</style>